<!-- 新机租机订单管理 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="订单列表" name="one">
        <SearchTable
          :rentMobileOrderType="rentMobileOrderType"
          :deliveryTypeList="deliveryTypeList"
          :selectPlatformType="selectPlatformType"
          :selectWhether="selectWhether"
          :orderStatusList="orderStatusList"
          :logisticsList="logisticsList"
          :selectSearchType="selectSearchType"
          :customerList="customerList"
          ref="searchTableRef"
          @handleAdd="handleAdd"
          @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="订单详情" name="two">
        <FormTab :id="selectId" :provinceList="provinceList" :selectPlatformType="selectPlatformType" v-model:formStatus="formStatus" @handleInitData="clearData" @handleSuccess="handleSuccess" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="rentMachineOrderInfo">
import SearchTable from "@/components/rentMachineManage/rentMachineOrderInfo/SearchTable.vue";
import FormTab from "@/components/rentMachineManage/rentMachineOrderInfo/FormTab.vue";
import { useDictData } from "@/hooks/network/useDictData";
import type { IDictData } from "@/types/dict";
import type { TabsPaneContext } from "element-plus";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { IExpressOften } from "@/types/express";
import { getLogisticsInfo } from "@/utils/api/express";
import type { IRentCustomer, ISearchRentCustomer } from "@/types/rentMachineManage/rentMachineOrderInfo";
import { getCustomerList } from "@/utils/api/admin/user/master";
import { safeAsync } from "@/utils/utils";
import type { IRegion, ISearchRegion } from "@/types/redPacketMallManage/region";
import { getRegionInfo } from "@/utils/api/region";
let { getDictData, getDictInfoV2 } = useDictData();
/* 表格状态 */
const formStatus = ref<ViewMode>("none");
/* 标签页切换 */
const activeName = ref<TabsMode>("one");
const selectId = ref(0);
/* 表格子组件的引用 */
const searchTableRef = useTemplateRef("searchTableRef");
/* 租机类型 */
const rentMobileOrderType = ref<Array<IDictData>>([]);
/* 配送方式 */
const deliveryTypeList = ref<Array<IDictData>>([]);
/* 平台类型 */
const selectPlatformType = ref<Array<IDictData>>([]);
/* 是否字段（账单是否有支付，是否有创建预授权) */
const selectWhether = ref<Array<IDictData>>([]);
/* 订单状态 */
const orderStatusList = ref<Array<IDictData>>([]);
/* 物流信息 */
const logisticsList = ref<Array<IExpressOften>>([]);
/* 订单查询类型 */
const selectSearchType = ref<Array<IDictData>>([]);
/* 客服信息 */
const customerList = ref<Array<IRentCustomer>>([]);

/* 省 */
const provinceList = ref<Array<IRegion>>([]);

/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}

/* 处理查看编辑 */
function handleViewEdit(id: number, code: ViewModeFilter) {
  selectId.value = id;
  formStatus.value = code;
  activeName.value = "two";
}

/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  selectId.value = 0;
  activeName.value = "one";
  formStatus.value = "none";
}

/* 处理修改成功 */
function handleSuccess() {
  searchTableRef.value?.getTableInfo();
}

/* 获取物流公司信息 */
function handleGetLogisticsInfo() {
  getLogisticsInfo<Array<IExpressOften>>()
    .then(res => {
      logisticsList.value = res.result;
      logisticsList.value.push({
        id: -1,
        name: "无需物流",
        shipping_code: "-1"
      });
    })
    .catch(() => {});
}

/* 获取客服列表 */
function handleCustomerList() {
  getCustomerList<IRentCustomer, ISearchRentCustomer>({
    current: 1,
    size: 100
  })
    .then(res => {
      customerList.value = res.result.data;
    })
    .finally(() => {});
}
/* 获取省市县信息 */
function handleGetRegionInfo(parent_id: number, list: Ref<IRegion[]>) {
  getRegionInfo<IRegion, ISearchRegion>({ parent_id })
    .then(res => {
      list.value = ([] as IRegion[]).concat(res.result);
    })
    .catch(() => {});
}

/* 获取订单状态 */
async function getOrderStatusInfo() {
  let [err, list] = await safeAsync<Array<IDictData>, [string]>(getDictInfoV2)("RENT_MOBILE_ORDER_STATUS");
  if (!err) {
    /* 过滤订单状态 */
    const filterOrderStatus = ["0", "1", "2", "3", "5", "6", "7", "8", "9", "10", "11", "21", "22"];
    orderStatusList.value = list!.filter(item => !filterOrderStatus.includes(item.dictValue));
  }
}
/* 获取租机类型 */
async function getRentMobileOrderTypeInfo() {
  let [err, list] = await safeAsync<Array<IDictData>, [string]>(getDictInfoV2)("RENT_MOBILE_ORDER_TYPE");
  if (!err) {
    /* 过滤订单状态 */
    const filterData = ["merchantRent", "selfRent", "newMerchantRent", "kuaishouRent", "kuaishouStoreRent", "douyinStoreRent", "douyinStore", "offlineRent", "offlineCardContractPackageRent", "storeOldMobileRent", "douyinRentV2"];
    rentMobileOrderType.value = list!.filter(item => !filterData.includes(item.dictValue));
  }
}

getDictData("SHIPPING_METHOD", deliveryTypeList);
getDictData("PLATFORM_TYPE", selectPlatformType);
getDictData("WHETHER", selectWhether);
getDictData("ORDER_SEARCH_TYPE", selectSearchType);

handleGetLogisticsInfo();
handleCustomerList();

getOrderStatusInfo();
getRentMobileOrderTypeInfo();

handleGetRegionInfo(0, provinceList);
</script>

<style scoped></style>
